class Cart{
    constructor(){
        this.url = "http://localhost:3000/api";
        this.tbody = document.querySelector("tbody");

        // 1. 读取本地存储中的数据
        this.getLocal();
        // 2. 读取后端的商品数据
        this.load();
        // 4. 添加事件
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.tbody.addEventListener("input",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className === "setNum"){
                // 获取id
                that.id = target.parentNode.parentNode.getAttribute("index");
                // 获取数量
                that.num = target.value-0;
                // 5. 根据获取到的数量，修改本地数据
                that.setLocal(function(i){
                    that.goods[i].num = that.num;
                });
            }
        })
        this.tbody.addEventListener("click",function(eve){
            const e = eve || window.event;
            const target = e.target || e.srcElement;
            if(target.className === "del"){
                // 获取id
                that.id = target.parentNode.getAttribute("index");
                // 手动删除DOM元素
                target.parentNode.remove();
                // 6. 删除本地数据中的指定商品
                that.setLocal(function(i){
                    that.goods.splice(i, 1)
                });
            }
        })
    }
    setLocal(cb){
        // 遍历，找到要操作的数据
        let i = 0;
        this.goods.some((val,idx)=>{
            i = idx;
            return val.id === this.id;
        })
        // 执行外部传入的操作功能，同时将遍历到的要操作的数据的索引，传回去
        cb(i);
        // 再将操作之后的数据，存回本地存储
        localStorage.setItem("goods", JSON.stringify(this.goods));
    }
    getLocal(){
        // 读本地数据
        this.goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
    }
    load(){
        // 开启ajax读后端数据
        ajax({
            url:this.url,
            data:{
                type:"getGoods"
            },
            success:res=>{
                // 解析数据
                this.res = JSON.parse(res).msg;
                // console.log(this.res);
                // 3. 渲染页面
                this.render();
            }
        })
    }
    render(){
        // console.log(this.res)
        // console.log(this.goods)
        let str = "";
        // 遍历后端数据
        this.res.forEach(val1=>{
            // 遍历本地数据
            this.goods.forEach(val2=>{
                // 比对id
                if(val1.proId === val2.id){
                    // console.log(val1);
                    // 拼接页面结构
                    str += `<tr index="${val2.id}">
                                <td><input type="checkbox"></td>
                                <td><img src="${val1.img}" alt=""></td>
                                <td>${val1.proName}</td>
                                <td><input type="number" class="setNum" value="${val2.num}"></td>
                                <td>${val1.price}</td>
                                <td>${val2.num * val1.price}</td>
                                <td class="del">删除</td>
                            </tr>`
                }
            })
        })
        // 将拼接好的页面结构，填充到页面
        this.tbody.innerHTML = str;
    }
}


new Cart();